(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "react", "./common"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const React = require("react");
    const common_1 = require("./common");
    function findPageView(p) {
        while (p) {
            let attr = p.getAttribute('data-reactroot');
            if (attr != null) {
                return p;
            }
            p = p.parentElement;
        }
        return null;
    }
    class Button extends React.Component {
        onClick(e) {
            this.currentClickEvent = e;
            if (this.props.onClick == null) {
                return;
            }
            if (this.doing)
                return;
            if (this.props.confirm) {
                this.showDialog();
            }
            else {
                this.execute(e);
            }
        }
        showDialog() {
            this.dialogElement.parentElement.style.display = 'block';
            this.dialogElement.style.transform = `translateY(-${this.dialogElement.getBoundingClientRect().height}px)`;
            setTimeout(() => this.dialogElement.style.transform = `translateY(${100}px)`, 50);
        }
        hideDialog() {
            this.dialogElement.style.transform = `translateY(-${this.dialogElement.getBoundingClientRect().height}px)`;
            setTimeout(() => this.dialogElement.parentElement.style.display = 'none', this.animateTime);
        }
        execute(e) {
            let result = this.props.onClick(e);
            this.doing = true;
            if (result == null || result.catch == null || result.then == null) {
                this.doing = false;
                return;
            }
            result.then(o => {
                this.doing = false;
            }).catch(o => {
                this.doing = false;
            });
            return result;
        }
        get doing() {
            return this._doing;
        }
        set doing(value) {
            this._doing = value;
            if (value) {
                this.buttonElement.disabled = true;
            }
            else {
                this.buttonElement.disabled = false;
            }
        }
        cancel() {
            this.hideDialog();
        }
        ok() {
            let result = this.execute(this.currentClickEvent);
            if (result instanceof Promise) {
                result.then(() => this.hideDialog());
            }
            else {
                this.hideDialog();
            }
        }
        renderConfirmDialog() {
        }
        render() {
            let children = common_1.getChildren(this.props);
            return (React.createElement("span", null,
                React.createElement("button", { ref: (o) => this.buttonElement = o || this.buttonElement, onClick: (e) => this.onClick(e), className: this.props.className, style: this.props.style, disabled: this.props.disabled }, children.map(o => (o))),
                React.createElement("div", { style: { display: 'none' } },
                    React.createElement("div", { ref: (o) => this.dialogElement = o || this.dialogElement, className: "modal", style: { display: 'block', transform: 'translateY(-10000px)', transition: `${this.animateTime / 1000}s` } },
                        React.createElement("div", { className: "modal-dialog" },
                            React.createElement("div", { className: "modal-content" },
                                React.createElement("div", { className: "modal-body" },
                                    React.createElement("h5", { dangerouslySetInnerHTML: { __html: this.props.confirm } })),
                                React.createElement("div", { className: "modal-footer" },
                                    React.createElement("button", { type: "button", onClick: () => this.cancel(), className: "btn btn-default" }, "\u53D6\u6D88"),
                                    React.createElement("button", { type: "button", onClick: () => this.ok(), className: "btn btn-primary" }, "\u786E\u8BA4"))))),
                    React.createElement("div", { className: "modal-backdrop in" }))));
        }
    }
    exports.Button = Button;
});
